<template>
  <div class="castingManagement">
    <div class="search-bar">
      <el-form :inline="true" class="search-form" ref="test-form" :model="searchForm" label-width="auto" size="small"
        style="display: flex; justify-content: space-between">
        <div class="input-row">
          <!--            <el-form-item label="类别名称:" class="search-form-item">-->
          <!--              <el-input v-model="form.denomName" placeholder="类别名称"></el-input>-->
          <!--            </el-form-item>-->
          <el-form-item label="商品名称:" class="search-form-item">
            <el-input v-model="form.nftName" placeholder="商品名称"></el-input>
          </el-form-item>
          <el-form-item label="审核状态:" class="search-form-item">
            <el-select v-model="form.status" placeholder="状态选择">
              <el-option label="待审核" value="0"></el-option>
              <el-option label="审核成功" value="2"></el-option>
              <el-option label="审核失败" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="铸币类型:" class="search-form-item">
            <el-select v-model="form.mintType" placeholder="状态选择">
              <el-option label="普通铸币" value="0"></el-option>
              <el-option label="追加铸币" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="default-btn primary-btn" @click="theQuery">搜索</div>
            <div class="default-btn" @click="clearSearch">重置</div>
          </el-form-item>
        </div>
        <div>
          <!-- <div class="default-btn primary-btn" @click="onCasting">申请铸币</div> -->

          <!-- <div class="default-btn primary-btn" @click="openApplyCoinage">
              申请铸币
            </div> -->
        </div>
      </el-form>
    </div>

    <el-table :data="dataList" border style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }">
      <el-table-column prop="index" label="ID" width="80">
        <template scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="shopName" label="店铺名称" width="200" />
      <el-table-column prop="denomName" label="类别名称" width="200" />
      <el-table-column prop="nftName" label="商品名称" width="200" />
      <el-table-column prop="nftNum" label="数量" width="100" />
      <el-table-column prop="createTime" label="提交时间" width="200" />
      <el-table-column prop="status " label="审核状态" width="100">
        <template scope="scope">
          <div v-if="scope.row.applyStatus == 0" style="color: #409eff">待审核</div>
          <div v-if="scope.row.applyStatus == 1" style="color: #f56c6c">已拒绝</div>
          <div v-if="scope.row.applyStatus == 2" style="color: #67c23a">审核成功</div>
        </template>
      </el-table-column>
      <el-table-column prop="status " label="铸币状态" width="100">
        <template scope="scope">
          <div v-if="scope.row.mintStatus == 0" style="color: #409eff">待铸币</div>
          <div v-if="scope.row.mintStatus == 1" style="color: #409eff">铸币中</div>
          <div v-if="scope.row.mintStatus == 2" style="color: #67c23a">铸币成功</div>
          <div v-if="scope.row.mintStatus == 3" style="color: #f56c6c">铸币失败</div>
          <div v-if="scope.row.mintStatus == 4" style="color: #f56c6c">铸币上链中</div>
        </template>
      </el-table-column>
      <el-table-column prop="mintType" label="类型" width="200">
        <template scope="scope">
          <div>{{ scope.row.mintType == 0 ? "普通铸币" : "追加铸币" }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="mintType" label="拒绝理由" width="450" show-overflow-tooltip>
        <template scope="scope">
          <div>{{ scope.row.refuseInfo }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" width="300">
        <template scope="scope">
          <el-button size="mini" type="text" @click="openFrameApplicationDetails(dataList[scope.$index])">详情</el-button>
          <div v-if="scope.row.applyStatus == 0" style="color: #409eff">
            <el-button size="mini" type="success" @click="agree(dataList[scope.$index], 2)">同意</el-button>
            <el-button size="mini" type="danger" @click="agree(dataList[scope.$index], 1)">驳回</el-button>
          </div>
          <el-button v-if="scope.row.applyStatus == 2 && scope.row.mintStatus == 0" size="mini" type="primary"
            :loading="scope.row.buttonType" @click="toMint(scope.row, scope.$index)">
            {{ scope.row.mintType == 0 ? "普通铸币" : "追加铸币" }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.currentPage"
      :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize" :total="page.total"
      layout="total, sizes, prev, pager, next, jumper"></el-pagination>

    <!-- 新建品类弹窗 -->
    <casting v-if="castingShow" @hidden="castingHidden" />
    <coins v-if="coinsShow" ref="coins" :itemInOf="itemInOf" @refreshDataList="refreshChange" />
    <applyCoinage ref="applyCoinage" @refreshDataList="refreshChange"></applyCoinage>
    <applicationDetails ref="applicationDetails" :itemInOf="itemInOf" @refreshDataList="refreshChange">
    </applicationDetails>
  </div>
</template>

<script>
import coins from "./coins.vue"; // 查看铸币
import casting from "./casting.vue"; // 铸造弹窗

import applicationDetails from "./applicationDetails"; // 详情弹框

import applyCoinage from "./applyCoinage"; // 铸造弹窗
//   import { forEach } from 'element-resize-detector/src/collection-utils';

export default {
  components: {
    casting,
    coins,
    applicationDetails,
    applyCoinage,
  },
  data() {
    return {
      dataList: [],
      applicationDetails: false, //详情弹框
      castingShow: false,
      coinsShow: false,
      applyCoinage: false,
      //返回的参数
      itemInOf: "",
      form: {
        type: "",
        region: "",
        denomName: "",
        nftName: "",
        mintType: "",
        status: ""
      },
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条,
      },
      searchForm: {
        seckillName: null,
        status: null,
      },
    };
  },
  mounted() {
    this.getDataList(this.page);
  },
  methods: {

    getDataList(page) {
      this.pageLoading = true;
      this.$http({
        url: this.$http.adornUrl(
          `/p/nftapply/pageNftApplyList?size=${this.page.pageSize}&current=${this.page.currentPage}&nftName=${this.form.nftName}&type=${this.form.type}&mintType=${this.form.mintType}&status=${this.form.status}`
        ),
        method: "get",
      }).then(({ data }) => {
        data.records.forEach((item) => {
          item.buttonType = false;
        })
        this.dataList = data.records;
        this.page.total = data.total;
        this.dataListLoading = false;
      });
    },
    /**
      铸币
     */
    toMint(e, index) {
      this.dataList[index].buttonType = true;
      this.$http({
        url: e.mintType == 0 ? this.$http.adornUrl(`/admin/nftdaw/mintsNftDawNew?applyId=${e.id}`) : this.$http.adornUrl(`/admin/nftdaw/addToMintsNftDawNew?applyId=${e.id}`),
        method: "get",
      }).then(({ data }) => {
        this.getDataList(this.page);
        this.$message({
          type: "success",
          message: "铸币成功",
        });
        this.dataList[index].buttonType = false;
      });

    },


    /**
      同意
     */
    agree(e, type) {
      console.log(e.id);
      console.log(type);
      if (type == 2) {
        //同意接口
        this.$confirm("确定要同意操作, 是否继续?", "温馨提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.dataApplication(e.id, type);
            // this.form.type = "";
            // this.form.denomName = "";
            // this.form.nftName = "";
            // this.form.mintType = "";
            // this.form.status = "";
            // this.page.currentPage = 1
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消同意",
            });
          });
      } else {
        this.$prompt("请输驳回理由", "温馨提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(({ value }) => {
            this.dataApplicationFail(e.id, type, value);
            this.form.type = "";
            this.form.denomName = "";
            this.form.nftName = "";
            this.form.mintType = "";
            this.form.status = "";
            this.page.currentPage = 1
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消输入",
            });
          });

        // this.$prompt("请输驳回理由", "温馨提示", {
        //   confirmButtonText: "确定",
        //   cancelButtonText: "取消",
        // })
        //   .then(({ value }) => {
        //     this.dataApplication(e.id, type, value);
        //   })
        //   .catch(() => {
        //     this.$message({
        //       type: "info",
        //       message: "取消输入",
        //     });
        //   });
      }
    },

    // let data1 = {
    //   status: type,
    //   id: id,
    //   refuseInfo: content,
    // };

    //成功接口
    dataApplication(id, type) {
      let data = {
        applyStatus: type,
        id: id,
      };
      this.$http({
        url: this.$http.adornUrl(`/p/nftapply/updateApplyStatus`),
        method: "post",
        data: data,
      }).then(({ data }) => {
        // this.getDataList(this.page);
        this.$message({
          type: "success",
          message: "同意成功!",
        });
      });
    },
    //失败
    dataApplicationFail(id, type, content) {
      let data = {
        applyStatus: type,
        id: id,
        refuseInfo: content,
      };
      this.$http({
        url: this.$http.adornUrl(`/p/nftapply/updateApplyStatus`),
        method: "post",
        data: data,
      }).then(({ data }) => {
        this.getDataList(this.page);
        this.$message({
          type: "success",
          message: "已驳回",
        });
      });
    },
    //查看NFT
    handleClick(e) {
      if (e.status == 0) {
        //待审核
        this.$notify({
          title: "温馨提示",
          message: "请先同意或拒绝申请后在铸币",
          type: "warning",
        });
      } else if (e.status == 1) {
        // 审核失败
        this.$notify.error({
          title: "审核失败",
          message: e.refuseInfo,
        });
      } else {
        //审核成功
        this.itemInOf = e;
        this.coinsShow = true;
        this.$nextTick(() => {
          this.$refs.coins.init();
        });
      }
    },
    /**
     * 打开申请详情弹框
     */
    openFrameApplicationDetails(e) {
      this.itemInOf = e;
      this.applicationDetails = true;
      this.$nextTick(() => {
        this.$refs.applicationDetails.init();
      });
    },

    //刷新当前页面
    refreshChange() {
      this.getDataList(this.page);
    },

    //点击隐藏铸造弹窗
    castingHidden() {
      this.castingShow = false;
    },

    coinsHidden() {
      this.coinsShow = false;
    },

    searchChange() {
      this.page.currentPage = 1;
      this.getDataList(this.page);
    },

    /**
     *  重置按钮
     */
    clearSearch() {
      this.form.type = "";
      this.form.denomName = "";
      this.form.nftName = "";
      this.form.mintType = "";
      this.form.status = "";
      this.page.currentPage = 1
      this.$http({
        url: this.$http.adornUrl(
          `/p/nftapply/pageNftApplyList?size=${this.page.pageSize}&current=${this.page.currentPage}&nftName=${this.form.nftName}&type=${this.form.type}&mintType=${this.form.mintType}&status=${this.form.status}`
        ),
        method: "get",
      }).then(({ data }) => {
        this.dataList = data.records;
        this.page.total = data.total;
        this.dataListLoading = false;
      });
    },

    //查询
    theQuery() {
      this.page.currentPage = 1
      this.$http({
        url: this.$http.adornUrl(
          `/p/nftapply/pageNftApplyList?size=${this.page.pageSize}&current=${this.page.currentPage}&nftName=${this.form.nftName}&type=${this.form.type}&mintType=${this.form.mintType}&status=${this.form.status}`
        ),
        method: "get",
      }).then(({ data }) => {
        this.dataList = data.records;
        this.page.total = data.total;
        this.dataListLoading = false;
      });
    },

    //点击显示铸造弹窗
    onCasting() {
      this.castingShow = true;
    },

    openApplyCoinage() {
      this.applyCoinage = true;
      this.$nextTick(() => {
        this.$refs.applyCoinage.init();
      });
    },

    //分页按钮
    handleSizeChange(val) {
      this.page.pageSize = val;
      // this.pageQuery.pageSize = val
      this.getDataList(this.page);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      // this.pageQuery.pageSize = val
      this.getDataList(this.page);
    },
  },
};
</script>

<style scoped>
.categoryManagement {
  width: 95% !important;
  margin: 30px auto 0;
}

.categoryManagement-table-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 30px 0;
}

.categoryManagement-table-header div {
  display: flex;
  flex-direction: row;
}

.categoryManagement-table-header div .input {
  margin-right: 15px !important;
}

.categoryManagement>>>.has-gutter tr th .cell {
  text-align: center;
}

.categoryManagement>>>.el-table__row td .cell {
  text-align: center;
}
</style>
